<div>
  <div class="table-container">
    <h3>00000000</h3>
    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px">
      <p-header>Vertical</p-header>
      <p-column field="vin" header="Vin"></p-column>
      <p-column field="year" header="Year"></p-column>
      <p-column field="brand" header="Brand"></p-column>
      <p-column field="color" header="Color"></p-column>
    </p-dataTable>
  </div>
  <div class="table-container">
    <h3>11111111</h3>
    <p-dataTable [value]="carsLarge" scrollable="true" scrollHeight="200px" [rows]="20" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}"
      [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)" [loading]="loading">
      <p-header>Virtual Scrolling - 250K Rows</p-header>
      <p-column field="vin" header="Vin"></p-column>
      <p-column field="year" header="Year"></p-column>
      <p-column field="brand" header="Brand"></p-column>
      <p-column field="color" header="Color"></p-column>
    </p-dataTable>
  </div>
  <div class="table-container">
    <h3>22222222</h3>
    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" scrollWidth="600px" [style]="{'margin-top':'30px'}">
      <p-header>Vertical and Horizontal</p-header>
      <p-column field="vin" header="Vin" [style]="{'width':'250px'}"></p-column>
      <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
      <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
      <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
  </div>

  <div class="table-container">
    <h3>33333333</h3>
    <p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" [style]="{'margin-top':'30px'}">
      <p-header>Frozen Rows</p-header>
      <p-column field="vin" header="Vin"></p-column>
      <p-column field="year" header="Year"></p-column>
      <p-column field="brand" header="Brand"></p-column>
      <p-column field="color" header="Color"></p-column>
    </p-dataTable>
  </div>

  <div class="table-container">
    <h3>44444444</h3>
    <p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">
      <p-header>Frozen Columns</p-header>
      <p-column field="vin" header="Vin" [style]="{'width':'250px'}" frozen="true"></p-column>
      <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
      <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
      <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
      <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
      <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
      <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
  </div>

  <div class="table-container">
    <h3>55555555</h3>
    <p-dataTable [value]="cars" [frozenValue]="frozenCars" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px"
      [style]="{'margin-top':'30px'}">
      <p-header>Frozen Rows and Columns</p-header>
      <p-column field="vin" header="Vin" [style]="{'width':'250px'}" frozen="true"></p-column>
      <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
      <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
      <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
      <p-column field="year" header="Year" [style]="{'width':'250px'}"></p-column>
      <p-column field="brand" header="Brand" [style]="{'width':'250px'}"></p-column>
      <p-column field="color" header="Color" [style]="{'width':'250px'}"></p-column>
    </p-dataTable>
  </div>

  <div class="table-container">
    <h3>66666666</h3>
    <p-dataTable [value]="sales" scrollable="true" scrollHeight="200px" frozenWidth="300px" unfrozenWidth="400px" [style]="{'margin-top':'30px'}">
      <p-header>Column Group and Frozen Columss</p-header>
      <p-headerColumnGroup frozen="true">
        <p-row>
          <p-column header="Brand" rowspan="2" [style]="{'width':'300px', height:'56px'}"></p-column>
        </p-row>
      </p-headerColumnGroup>
      <p-headerColumnGroup>
        <p-row>
          <p-column header="Last Year" colspan="2" [style]="{'width':'250px'}"></p-column>
          <p-column header="This Year" colspan="2" [style]="{'width':'250px'}"></p-column>
        </p-row>
        <p-row>
          <p-column header="Last Year" [style]="{'width':'125px'}"></p-column>
          <p-column header="This Year" [style]="{'width':'125px'}"></p-column>
          <p-column header="Last Year" [style]="{'width':'125px'}"></p-column>
          <p-column header="This Year" [style]="{'width':'125px'}"></p-column>
        </p-row>
      </p-headerColumnGroup>
      <p-column field="brand" [style]="{'width':'200px'}" frozen="true"></p-column>
      <p-column field="lastYearSale" [style]="{'width':'125px'}"></p-column>
      <p-column field="thisYearSale" [style]="{'width':'125px'}"></p-column>
      <p-column field="lastYearProfit" [style]="{'width':'125px'}"></p-column>
      <p-column field="thisYearProfit" [style]="{'width':'125px'}"></p-column>
    </p-dataTable>
  </div>
</div>
